<template>
  <theme-config :costomData="costomData" v-if="costomData.chartType == 'themeForm'"></theme-config>
  <bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'bar'"></bar-config>
  <line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'line'"></line-config>
  <scatter-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'scatter'"></scatter-config>
  <double-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doublebar'"></double-bar-config>
  <paralle-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'parallebar'"></paralle-bar-config>
  <top-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'topbar'"></top-bar-config>
  <cylinder-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'cylinder'"></cylinder-config>
  <staggered-label-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'staggeredLabel'"></staggered-label-config>
  <doubley-axis-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doubleyAxis'"></doubley-axis-config>
  <double-direction-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doubleDirectionBar'"></double-direction-bar-config>
  <double-bar-time-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doublebartime'"></double-bar-time-config>
  <single-column-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'singleColumn'"></single-column-config>
  <three-d-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'threeDBar'"></three-d-bar-config>
  <rate-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'rateBar'"></rate-bar-config>
  <text-config :costomData="costomData" v-else-if="costomData.chartType == 'text'"></text-config>
  <date-config :costomData="costomData" v-else-if="costomData.chartType == 'date'"></date-config>
  <image-config :costomData="costomData" v-else-if="costomData.chartType == 'img'"></image-config>
  <q-rcode-config :costomData="costomData" v-else-if="costomData.chartType == 'qRcode'"></q-rcode-config>
  <video-config :costomData="costomData" v-else-if="costomData.chartType == 'video'"></video-config>
  <hyper-link-config :costomData="costomData" v-else-if="costomData.chartType == 'hyperlink'"></hyper-link-config>
  <iframe-config :costomData="costomData" v-else-if="costomData.chartType == 'iframe'"></iframe-config>
  <rotation-config :costomData="costomData" v-else-if="costomData.chartType == 'rotation'" :key="costomData.customId"></rotation-config>
  <color-block-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'colorBlock'"></color-block-config>
  <word-cloud-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'wordcloud'"></word-cloud-config>
  <stacked-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'stackedBar'"></stacked-bar-config>
  <shadow-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'shadowLine'"></shadow-line-config>
  <table-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'taBle'"></table-config>
  <table-rotation-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'tablerotation'"></table-rotation-config>
  <table-top-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'tabletop'"></table-top-config>
  <handson-table-config :costomData="costomData" v-else-if="costomData.chartType == 'handsontable'"></handson-table-config>
  <input-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'input'"></input-config>
  <time-frame-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'timeframe'"></time-frame-config>
  <timeline-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'timeline'"></timeline-config>
  <cascade-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'cascade'"></cascade-config>
  <tab-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'tab'" :key="costomData.customId"></tab-config>
  <pie-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pieline'"></pie-line-config>
  <bar-pie-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'barPie'"></bar-pie-config>
  <line-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'linebar'"></line-bar-config>
  <map-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'mapbar'"></map-bar-config>
  <twinkle-border-config :costomData="costomData" v-else-if="costomData.chartType == 'twinkleborder'"></twinkle-border-config>
  <around-border-config :costomData="costomData" v-else-if="costomData.chartType == 'aroundborder'"></around-border-config>
  <ray-config :costomData="costomData" v-else-if="costomData.chartType == 'ray'"></ray-config>
  <diffuseray-config :costomData="costomData" v-else-if="costomData.chartType == 'diffuseray'"></diffuseray-config>
  <midi-keyboard-config :costomData="costomData" v-else-if="costomData.chartType == 'midikeyboard'"></midi-keyboard-config>
  <voiceprint-config :costomData="costomData" v-else-if="costomData.chartType == 'voiceprint'"></voiceprint-config>
  <rain-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'rain'"></rain-config>
  <pie-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pie'"></pie-config>
  <ring-pie-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'ringPie'"></ring-pie-config>
  <funnel-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'funnel'"></funnel-config>
  <radar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'radar'"></radar-config>
  <gauge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'gauge'"></gauge-config>
  <keygauge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'keygauge'"></keygauge-config>
  <progress-gauge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'progauge'"></progress-gauge-config>
  <select-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'select'"></select-config>
  <map-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'map'"></map-config>
  <three-d-map-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'threedMap'"></three-d-map-config>
  <lamp-text-config :costomData="costomData" v-else-if="costomData.chartType == 'lamp'"></lamp-text-config>
  <backborder-config :costomData="costomData" v-else-if="costomData.chartType == 'backborder'"></backborder-config>
  <map-more-config :costomData="costomData" v-else-if="costomData.chartType == 'mapMore'"></map-more-config>
  <water-ball-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'waterball'"></water-ball-config>
  <water-ball-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'waterballline'"></water-ball-line-config>
  <circle-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'circle'"></circle-config>
  <pie-more-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'piemore'"></pie-more-config>
  <progress-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'progress'"></progress-config>
  <knowledge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'knowledge'"></knowledge-config>
  <pops-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pops'"></pops-config>
  <sunburst-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'sunburst'"></sunburst-config>
  <flop-config :costomData="costomData" v-else-if="costomData.chartType == 'flop'"></flop-config>
  <text-check-box-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'textCheckBox'"></text-check-box-config>
  <custom-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'customChart'"></custom-config>
  <custom-water-ball-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'customWaterBall'"></custom-water-ball-config>
  <scanning-config :costomData="costomData" v-else-if="costomData.chartType == 'scanning'"></scanning-config>
  <turntable-config :costomData="costomData" v-else-if="costomData.chartType == 'turntable'"></turntable-config>
  <boxline-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'boxline'"></boxline-config>
  <tian-di-map-config :costomData="costomData" v-else-if="costomData.chartType == 'tiandiMap'"></tian-di-map-config>
  <galaxy-config :costomData="costomData" v-else-if="costomData.chartType == 'galaxy'"></galaxy-config>
  <card-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'card'"></card-config>
  <pictorial-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pictorialBar'"></pictorial-bar-config>
  <sankey-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType =='sankey'"></sankey-config>
  <heatMap-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType =='heatMap'"></heatMap-config>
  <custom-threeD-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'CustomThreeDBar'"></custom-threeD-bar-config>
</template> 

<script>

import VueEvent from '@/views/tool/datav/VueEvent'
import ThemeConfig from '@/views/tool/datav/components/config/ThemeConfig'
//import BarConfig from '@/views/tool/datav/components/config/BarConfig'
//import LineConfig from '@/views/tool/datav/components/config/LineConfig'
//import ScatterConfig from '@/views/tool/datav/components/config/ScatterConfig'
//import ParalleBarConfig from '@/views/tool/datav/components/config/ParalleBarConfig'
//import CylinderConfig from '@/views/tool/datav/components/config/CylinderConfig'
//import StaggeredLabelConfig from '@/views/tool/datav/components/config/StaggeredLabelConfig'
//import DoubleBarConfig from '@/views/tool/datav/components/config/DoubleBarConfig'
//import DoubleDirectionBarConfig from '@/views/tool/datav/components/config/DoubleDirectionBarConfig'
//import TopBarConfig from '@/views/tool/datav/components/config/TopBarConfig'
//import DoubleyAxisConfig from '@/views/tool/datav/components/config/DoubleyAxisConfig'
//import DoubleBarTimeConfig from '@/views/tool/datav/components/config/DoubleBarTimeConfig'
//import SingleColumnConfig from '@/views/tool/datav/components/config/SingleColumnConfig'
//import ThreeDBarConfig from '@/views/tool/datav/components/config/ThreeDBarConfig'
import TextConfig from '@/views/tool/datav/components/config/TextConfig'
import DateConfig from '@/views/tool/datav/components/config/DateConfig'
import ImageConfig from '@/views/tool/datav/components/config/ImageConfig'
import QRcodeConfig from '@/views/tool/datav/components/config/QRcodeConfig'
import VideoConfig from '@/views/tool/datav/components/config/VideoConfig'
import HyperLinkConfig from '@/views/tool/datav/components/config/HyperLinkConfig'
//import IframeConfig from '@/views/tool/datav/components/config/IframeConfig'
import RotationConfig from '@/views/tool/datav/components/config/RotationConfig'
import ColorBlockConfig from '@/views/tool/datav/components/config/ColorBlockConfig'
//import WordCloudConfig from '@/views/tool/datav/components/config/WordCloudConfig'
import TwinkleBorderConfig from '@/views/tool/datav/components/config/TwinkleBorderConfig'
import AroundBorderConfig from '@/views/tool/datav/components/config/AroundBorderConfig'
import RayConfig from '@/views/tool/datav/components/config/RayConfig'
import MidiKeyboardConfig from '@/views/tool/datav/components/config/MidiKeyboardConfig'
import VoiceprintConfig from '@/views/tool/datav/components/config/VoiceprintConfig'
import DiffuserayConfig from '@/views/tool/datav/components/config/DiffuserayConfig'
//import StackedBarConfig from '@/views/tool/datav/components/config/StackedBarConfig'
//import ShadowLineConfig from '@/views/tool/datav/components/config/ShadowLineConfig'
//import TableConfig from '@/views/tool/datav/components/config/TableConfig'
// import TableRotationConfig from '@/views/tool/datav/components/config/TableRotationConfig'
// import TableTopConfig from '@/views/tool/datav/components/config/TableTopConfig'
import HandsonTableConfig from '@/views/tool/datav/components/config/HandsonTableConfig'
import InputConfig from '@/views/tool/datav/components/config/InputConfig'
import TimeFrameConfig from '@/views/tool/datav/components/config/TimeFrameConfig'
import TimelineConfig from '@/views/tool/datav/components/config/TimelineConfig'
import CascadeConfig from '@/views/tool/datav/components/config/CascadeConfig'
import TabConfig from '@/views/tool/datav/components/config/TabConfig'
//import PieLineConfig from '@/views/tool/datav/components/config/PieLineConfig'
//import BarPieConfig from '@/views/tool/datav/components/config/BarPieConfig'
//import LineBarConfig from '@/views/tool/datav/components/config/LineBarConfig'
//import MapBarConfig from '@/views/tool/datav/components/config/MapBarConfig'
//import ThreeDMapConfig from '@/views/tool/datav/components/config/ThreeDMapConfig'
//import RainConfig from '@/views/tool/datav/components/config/RainConfig'
//import PieConfig from '@/views/tool/datav/components/config/PieConfig'
//import RingPieConfig from '@/views/tool/datav/components/config/RingPieConfig'
//import FunnelConfig from '@/views/tool/datav/components/config/FunnelConfig' //漏斗图
//import RadarConfig from '@/views/tool/datav/components/config/RadarConfig'  //雷达图
//import GaugeConfig from '@/views/tool/datav/components/config/GaugeConfig'  //仪表盘
//import KeygaugeConfig from '@/views/tool/datav/components/config/KeygaugeConfig'
import SelectConfig from '@/views/tool/datav/components/config/SelectConfig'
//import MapConfig from '@/views/tool/datav/components/config/MapConfig'
import LampTextConfig from '@/views/tool/datav/components/config/LampTextConfig'  //跑马灯
import BackborderConfig from '@/views/tool/datav/components/config/BackborderConfig' //背景框
import MapMoreConfig from '@/views/tool/datav/components/config/MapMoreConfig'
import WaterBallConfig from '@/views/tool/datav/components/config/WaterBallConfig'
import WaterBallLineConfig from '@/views/tool/datav/components/config/WaterBallLineConfig'
//import CircleConfig from '@/views/tool/datav/components/config/CircleConfig'
//import PieMoreConfig from '@/views/tool/datav/components/config/PieMoreConfig'
//import ProgressConfig from '@/views/tool/datav/components/config/ProgressConfig'
//import KnowledgeConfig from '@/views/tool/datav/components/config/KnowledgeConfig'
//import PopsConfig from '@/views/tool/datav/components/config/PopsConfig'
import FlopConfig from '@/views/tool/datav/components/config/FlopConfig'
//import TextCheckBoxConfig from '@/views/tool/datav/components/config/TextCheckBoxConfig'
//import CustomConfig from '@/views/tool/datav/components/config/CustomConfig'
import CustomWaterBallConfig from '@/views/tool/datav/components/config/CustomWaterBallConfig'
import ScanningConfig from '@/views/tool/datav/components/config/ScanningConfig'
import TurntableConfig from '@/views/tool/datav/components/config/TurntableConfig'
//import BoxlineConfig from '@/views/tool/datav/components/config/BoxlineConfig'
import TianDiMapConfig from '@/views/tool/datav/components/config/TianDiMapConfig'
import GalaxyConfig from '@/views/tool/datav/components/config/GalaxyConfig'


export default {
  components: {   
    ThemeConfig,
    BarConfig:()=>import('@/views/tool/datav/components/config/BarConfig'),
    LineConfig:()=>import('@/views/tool/datav/components/config/LineConfig'),
    ScatterConfig:()=>import('@/views/tool/datav/components/config/ScatterConfig'),
    ParalleBarConfig:()=>import('@/views/tool/datav/components/config/ParalleBarConfig'),
    CylinderConfig:()=>import('@/views/tool/datav/components/config/CylinderConfig'),
    StackedBarConfig:()=>import('@/views/tool/datav/components/config/StackedBarConfig'),
    StaggeredLabelConfig:()=>import('@/views/tool/datav/components/config/StaggeredLabelConfig'),
    DoubleBarConfig:()=>import('@/views/tool/datav/components/config/DoubleBarConfig'),
    TopBarConfig:()=>import('@/views/tool/datav/components/config/TopBarConfig'),
    DoubleyAxisConfig:()=>import('@/views/tool/datav/components/config/DoubleyAxisConfig'),
    DoubleDirectionBarConfig:()=>import('@/views/tool/datav/components/config/DoubleDirectionBarConfig'),
    DoubleBarTimeConfig:()=>import('@/views/tool/datav/components/config/DoubleBarTimeConfig'),
    SingleColumnConfig:()=>import('@/views/tool/datav/components/config/SingleColumnConfig'),
    ThreeDBarConfig:()=>import('@/views/tool/datav/components/config/ThreeDBarConfig'),
    RateBarConfig:()=>import('@/views/tool/datav/components/config/RateBarConfig'),
    TextConfig,
    DateConfig,
    ShadowLineConfig:()=>import('@/views/tool/datav/components/config/ShadowLineConfig'),
    RainConfig:()=>import('@/views/tool/datav/components/config/RainConfig'),
    ImageConfig,
    QRcodeConfig,
    VideoConfig,
    HyperLinkConfig,
    IframeConfig:()=>import('@/views/tool/datav/components/config/IframeConfig'),
    RotationConfig,
    ColorBlockConfig,
    WordCloudConfig:()=>import('@/views/tool/datav/components/config/WordCloudConfig'),
    TwinkleBorderConfig,
    AroundBorderConfig,
    RayConfig,
    DiffuserayConfig,
    MidiKeyboardConfig,
    VoiceprintConfig,
    TableConfig:()=>import('@/views/tool/datav/components/config/TableConfig'),
    TableRotationConfig:()=>import('@/views/tool/datav/components/config/TableRotationConfig'),
    TableTopConfig:()=>import('@/views/tool/datav/components/config/TableTopConfig'),
    HandsonTableConfig,
    InputConfig,
    TimeFrameConfig,
    TimelineConfig,
    CascadeConfig,
    TabConfig,
    PieLineConfig:()=>import('@/views/tool/datav/components/config/PieLineConfig'),
    BarPieConfig:()=>import('@/views/tool/datav/components/config/BarPieConfig'),
    LineBarConfig:()=>import('@/views/tool/datav/components/config/LineBarConfig'),
    MapBarConfig:()=>import('@/views/tool/datav/components/config/MapBarConfig'),
    ThreeDMapConfig:()=>import('@/views/tool/datav/components/config/ThreeDMapConfig'),
    PieConfig:()=>import('@/views/tool/datav/components/config/PieConfig'),
    RingPieConfig:()=>import('@/views/tool/datav/components/config/RingPieConfig'),
    FunnelConfig:()=>import('@/views/tool/datav/components/config/FunnelConfig'),
    RadarConfig:()=>import('@/views/tool/datav/components/config/RadarConfig'),
    GaugeConfig:()=>import('@/views/tool/datav/components/config/GaugeConfig'),
    KeygaugeConfig:()=>import('@/views/tool/datav/components/config/KeygaugeConfig'),
    ProgressGaugeConfig:()=>import('@/views/tool/datav/components/config/ProgressGaugeConfig'),
    SelectConfig,
    MapConfig:()=>import('@/views/tool/datav/components/config/MapConfig'),
    LampTextConfig,
    BackborderConfig,
    MapMoreConfig,
    WaterBallConfig,
    WaterBallLineConfig,
    CircleConfig:()=>import('@/views/tool/datav/components/config/CircleConfig'),
    PieMoreConfig:()=>import('@/views/tool/datav/components/config/PieMoreConfig'),
    ProgressConfig:()=>import('@/views/tool/datav/components/config/ProgressConfig'),
    KnowledgeConfig:()=>import('@/views/tool/datav/components/config/KnowledgeConfig'),
    PopsConfig:()=>import('@/views/tool/datav/components/config/PopsConfig'),
    SunburstConfig:()=>import('@/views/tool/datav/components/config/SunburstConfig'),
    FlopConfig,
    TextCheckBoxConfig:()=>import('@/views/tool/datav/components/config/TextCheckBoxConfig'),
    CustomConfig:()=>import('@/views/tool/datav/components/config/CustomConfig'),
    CustomWaterBallConfig,
    ScanningConfig,
    TurntableConfig,
    BoxlineConfig:()=>import('@/views/tool/datav/components/config/BoxlineConfig'),
    TianDiMapConfig,
    GalaxyConfig,
    CardConfig:()=>import('@/views/tool/datav/components/config/CardConfig'),
    PictorialBarConfig:()=>import('@/views/tool/datav/components/config/PictorialBarConfig'),
    CustomThreeDBarConfig:()=>import('@/views/tool/datav/components/config/CustomThreeDBarConfig'),
    SankeyConfig:()=>import('@/views/tool/datav/components/config/SankeyConfig'),
    HeatMapConfig:()=>import('@/views/tool/datav/components/config/HeatMapConfig')
  },
  props: ["activeData", "drawingList"],
  data() {
    return {
      
      costomData: this.activeData,
      
    }
  },
  //页面加载完执行
  mounted() {
    // VueEvent.$on("to_activated_msg", data=>{
    //   this.costomData = data;
    // })
  },
  computed: {
    
  },
  watch: {
    costomData: {
      deep: true,
      handler(newVal) {
        //console.log("3=>", newVal);
        //this.$emit("active-change", newVal);
      }
    },
    activeData: {
      deep: true,
      handler(newVal) {
        this.costomData = newVal;
      }
    }
  },
  methods: {
    costomChange(value) {
      console.log("2=>", value);
      this.costomData = value;
    }
  }
}
</script>

<style lang="scss" scoped>
.right-board {
  width: 400px;
    position: absolute;
    right: 50px;
    top: 85px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    height: 600px;
    border: 1px solid #409eff;
    overflow-y: scroll;
  .field-box {
    position: relative;
    height: calc(100vh - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }
  .el-scrollbar {
    height: 100%;
  }
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  ::v-deep .el-icon-time {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label{
  font-size: 14px;
}
.node-icon{
  color: #bebfc3;
}
</style>
